<template>
    <div class="login">
        <div class="container">
            <div class="logo">
              <el-image :src="avatar" style="height: 100px;width: 100px;"></el-image>
            </div>
        
            <div class="form-container">
                <el-form :model="formPass" :rules="rulesPass" ref="ruleFormRef" class="demo-ruleForm">
                    <el-form-item prop="username">
                        <el-input v-model="formPass.username" placeholder="请输入账号" clearable />
                    </el-form-item>
                    <el-form-item prop="password" style="margin-top: 20px;">
                        <el-input v-model="formPass.password" placeholder="请输入登录密码" clearable type="password"
                            show-password @keyup.enter.native="onSubmit(ruleFormRef)" />
                    </el-form-item>
                </el-form>
          
                <div class="btn">
                    <el-button type="primary" @click="onSubmit(ruleFormRef)" size="large" style="width: 80%">登 陆
                    </el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import avatar from "../../assets/login/avatar.png"
import type { FormInstance } from 'element-plus'
import { useRouter } from "vue-router"
import { reactive, ref } from "vue"
import { loginGetApi } from "@/api/login"
import { setTokens, setStorage } from "@/utils/auth"
import { useUserInfoStore } from "@/store/user"
import { useColorStore } from "@/store/common"
import { accountMyApiGet } from "@/api/userMangement"
import { menuStore } from "@/store/menu"
import router1 from '@/router/index'

const userStore = useUserInfoStore()
const useColor = useColorStore()
const useMenuStore = menuStore()
const { setUserInfo } = userStore
const { getProvince } = useColor
const {  getMenuList } = useMenuStore
const ruleFormRef = ref<FormInstance>()
const router = useRouter()

const formPass = reactive({
    username: '',
    password: '',

})
const rulesPass = reactive({
    username: [
        {
            required: true,
            message: "请输入登录账号！",
            trigger: "blur",
            informType: "warning"
        }
    ],
    password: [
        {
            required: true,
            message: "请输入登录密码！",
            trigger: "blur",
            informType: "warning"
        }
    ]
})

const onSubmit = async (formEl: FormInstance | undefined) => {

    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            const res = await loginGetApi(formPass)
            if (res.code == 20000) {
                setTokens(res.data.accessToken)
                // 菜单
                await getMenuList(router1)
                const userDetail = await accountMyApiGet()
                setUserInfo(userDetail.data)
                router.push("/")
                setStorage('targetPath', '/')
                getProvince()
            }

        } else {
            console.log('error submit!', fields)
        }
    })
}

</script>
<style lang="scss" scoped>
.login{
    height: 100%;
    display: flex;
    flex-direction: column;
}
:deep(.el-input__wrapper) {
    background: none !important;
    box-shadow: none;
    border-bottom: 1px solid #EEEEEE;
    border-radius: 0;
}

:deep(.el-form-item.is-error .el-input__wrapper) {
    box-shadow: none;
}
</style>
